<template>
  <div v-if="errorLogs.length > 0">
    <el-badge :is-dot="true" @click.native="dialogTableVisible = true">
      <i class="el-icon-warning-outline"></i>
    </el-badge>

    <el-dialog :visible.sync="dialogTableVisible" width="80%" top="10vh">
      <div slot="title">
        <span style="fontSize:18px;padding-right: 10px;">Error Log</span>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-delete"
          @click="clearAll"
          >Clear All</el-button
        >
      </div>
      <el-scrollbar>
        <el-table :data="errorLogs" border>
          <el-table-column label="Message">
            <template slot-scope="{ row }">
              <div>
                <span class="message-title">Msg:</span>
                <el-tag type="danger">
                  {{ row.err.message }}
                </el-tag>
              </div>
              <br />
              <div>
                <span class="message-title" style="padding-right: 10px;"
                  >Info:
                </span>
                <el-tag type="warning">
                  {{ row.vm }} error in {{ row.info }}
                </el-tag>
              </div>
              <br />
              <div>
                <span class="message-title" style="padding-right: 16px;"
                  >Url:
                </span>
                <el-tag type="success">
                  {{ row.url }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="Stack">
            <template slot-scope="scope">
              {{ scope.row.err.stack }}
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTableVisible: false
    }
  },

  computed: {
    errorLogs() {
      return this.$store.getters.errorLogs
    }
  },

  methods: {
    clearAll() {
      this.dialogTableVisible = false
      this.$store.dispatch('errorLog/clearErrorLog')
    }
  }
}
</script>

<style lang="scss" scoped>
i {
  font-size: 26px;
  cursor: pointer;
}
.message-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding-right: 8px;
}
/deep/.el-dialog__body {
  height: 66vh;
}
</style>
